---
title: Select (Native)
description: Used to pick a value from predefined options.
links:
  source: components/native-select
  storybook: components-native-select--basic
  recipe: native-select
---

<ExampleTabs name="native-select-basic" />

## Anatomy

```jsx
import { NativeSelect } from '@saas-ui/react/native-select'
```

```jsx
<NativeSelect.Root>
  <NativeSelect.Field>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </NativeSelect.Field>
</NativeSelect.Root>
```

## Examples

### Sizes

Use the `size` prop to change the size of the select component.

<ExampleTabs name="native-select-with-sizes" />

### Variants

Use the `variant` prop to change the appearance of the select component.

<ExampleTabs name="native-select-with-variants" />

### Items Prop

Pass the `items` prop to the `NativeSelectField` component to render a list of
options.

<ExampleTabs name="native-select-with-items" />

### Controlled

Use the `value` and `onChange` props to control the select component.

<ExampleTabs name="native-select-controlled" />

### Hook Form

Here is an example of how to use the `NativeSelect` component with
`react-hook-form`.

<ExampleTabs name="native-select-with-hook-form" />

## Props

### Root

<PropTable component="NativeSelect" part="Root" />
